<template>
	<view>
		<u-sticky>
			<view class="tabs_box">
				<u-tabs :scrollable="false" keyName="dictLabel" :list="tabsList" @click="handleTabs"
					:current="currentIndex" barHeight="6rpx" barMarginBottom="20rpx"></u-tabs>
			</view>
		</u-sticky>
		<template v-if="currentIndex === 0">
			<view class="info">
				<u-cell-group>
					<u-cell :title="item.label" v-for="(item,index) in formList" :key="item.prop"
						:required="item.required">
						<template slot="value">
							<view v-if="item.type =='dict'">
								<dicts-tag :list="dictList[item.dictType]" :value="info[item.prop]"></dicts-tag>
							</view>
							<view v-else-if="item.type=='image'">
								<file-upload :list="imageList" disable style="margin-top: 12px;"></file-upload>
							</view>
							<view v-else>
								{{info[item.prop]}}
							</view>
						</template>
					</u-cell>



					<u-cell title="现处单号(选填)">
						<template slot="value">
							<!-- <u--input v-if="type=='whjd'" placeholder="请输入现处单号" v-model="info['currentTrackingCode']"
							border="none" inputAlign='right'></u--input>
						<text v-else>{{info['currentTrackingCode']}}</text> -->
							{{info['currentTrackingCode']}}
						</template>
					</u-cell>
					<u-cell title="解决方案">
						<file-upload :list="fileList" slot="value" accept="file" :disable="true"
							style="margin-top: 12px;" @updataFile="updataImage"></file-upload>
					</u-cell>
					<u-cell title="进展登记">
						<template slot="value">
							<u--textarea height="150" class="progress" :confirmType="null"
								:ignoreCompositionEvent="false" v-if="type=='whjd'" slot="value"
								v-model="info['problemProgress']" border="none" placeholder="请输入进展进度"></u--textarea>
							<text v-else="disabled">{{info['problemProgress']}}</text>
						</template>
					</u-cell>
					<u-cell title="结果反馈">
						<template slot="value">
							<text v-if="disabled">{{result}}</text>
							<u--textarea :confirmType="null" v-else v-model="result" :disabled="disabled" border="none"
								:placeholder=" disabled ? '' :  `请输入`" inputAlign='right'></u--textarea>
						</template>
					</u-cell>

				</u-cell-group>
			</view>
			<bottom-button @click="submit" text="提交" v-if="!disabled"></bottom-button>
			<bottom-button @click="undataProgress" text="更新进度" v-else-if="type== 'whjd'"></bottom-button>
		</template>

		<template v-else>
			<view class="timelistbox">
				<u-steps :current="infoDateTimeList.length+ 1" direction="column" dot>
					<u-steps-item :title="item.operatorDate" v-for="item in infoDateTimeList">
						<template slot="desc">
							<view class="desc_card">
								<view class="desc_card_item">
									<view class="desc_card_item_l">阶段：</view>
									<view class="desc_card_item_r">{{item.stepName}}</view>
								</view>
								<view class="desc_card_item">
									<view class="desc_card_item_l">日期：</view>
									<view class="desc_card_item_r">{{item.operatorDate}}</view>
								</view>
								<view class="desc_card_item">
									<view class="desc_card_item_l">内容：</view>
									<view class="desc_card_item_r">{{item.content}}</view>
								</view>
								<view class="desc_card_item">
									<view class="desc_card_item_l">操作人：</view>
									<view class="desc_card_item_r">{{item.operatorUserName}}</view>
								</view>
							</view>
						</template>
					</u-steps-item>
				</u-steps>
			</view>
		</template>
	</view>

</template>

<script>
	import {
		detail,
		getDicts,
		getProblemType,
		getFileList,
		complete,
		progress,
		progressList
	} from "@/common/api.js"
	import config from "@/common/config.js"
	import bottomButton from "@/components/bottomButton.vue"
	import fileUpload from "@/components/fileUpload.vue"
	import dictsTag from "@/components/dictsTag.vue"
	import dicts from '@/mixins/dicts.js'
	export default {
		mixins: [dicts],
		components: {
			bottomButton,
			fileUpload,
			dictsTag
		},
		data() {
			return {
				currentIndex: 0,
				result: '',
				imgIds: '',
				value: '',
				dictList: {},
				treeData: {},
				formList: [{
						label: '项目名称',
						prop: 'projectName',
						type: 'select',
						status: 'normal',
						required: true,
						url: '/pages/product/index'
					}, {
						label: '工号',
						prop: 'productNo',
						type: 'select',
						status: 'normal',
						required: true,
						url: '/pages/product/index'
					},
					{
						label: '问题类型',
						prop: 'problemTypeName',
						type: 'pick',
						status: 'normal',
						required: true
					},
					{
						label: '要求完成日期',
						prop: 'requireDate',
						type: 'date',
						status: 'normal',
						required: true
					},
					{
						label: '问题描述',
						prop: 'problemDesc',
						type: 'textarea',
						status: 'normal',
						required: true
					},
					{
						label: '问题原因',
						prop: 'problemCause',
						type: 'textarea',
						status: 'normal',
						required: true
					},
					{
						label: '现场图片',
						prop: 'upload_file1',
						type: 'image',
						status: 'normal',
						required: true
					},
				],

				info: {
					problemProgress: '',
					currentTrackingCode: ''
				},
				problemId: '',
				baseFileUrl: config.baseFileUrl,

				imgList: [],
				type: '', // 页面类型
				disabled: false,
				imageList: [],
				fileList: [],
				tabsList: [{
						dictLabel: '问题信息',
						dictValue: '2,3'
					},
					{
						dictLabel: '问题记录',
						dictValue: '4'
					},
				],
				infoDateTimeList: [],
			}
		},
		onLoad(e) {
			this.problemId = e.problemId || ''
			this.type = e.type || ''
			if (e.type == 2 || e.type == 'whjd') {
				this.disabled = true
			} else {
				this.disabled = false
			}
			this.getInfo()
			this.getDictsList('service_product_type')
			this.getDictsList('service_voltage_type')
			this.getProblemList()
			this.getDataTimeList()


		},
		onReady() {
			if (this.type == 2) {
				uni.setNavigationBarTitle({
					title: '详情'
				})
			} else if (this.type == 'whjd') {
				uni.setNavigationBarTitle({
					title: '进度维护'
				})
			}

		},
		methods: {
			handleTabs(e) {
				this.currentIndex = e.index

			},
			async getDataTimeList() {
				let res = await progressList({
					problemId: this.problemId
				})
				if (res.code == '00000' && res.data) {
					this.infoDateTimeList = res.data
				}
			},
			async getFile(type) {
				let res = await getFileList({
					bizType: type,
					bizId: this.problemId
				})

				if (type === 'problem_complete_file') {
					if (res.data) {
						this.fileList = res.data.map(item => {
							return {
								...item,
								url: config.baseFileUrl + item.fileId,
								name: item.fileName,
							}
						})

					}
				} else if (type === 'problem_info_file') {
					if (res.data) {
						this.imageList = res.data.map(item => {
							return {
								...item,
								url: config.baseFileUrl + item.fileId,
								name: item.fileName,
							}
						})

					}
				}
			},

			updataImage(e) {
				this.imgIds = e
			},
			async getInfo() {
				let that = this
				let res = await detail({
					problemId: this.problemId
				})
				if (res.code == '00000') {
					this.info = res.data

					this.result = res.data.result

					this.getFile('problem_info_file')
					this.getFile('problem_complete_file')

				}
			},
			async getProblemList() {
				let that = this
				let res = await getProblemType()
				if (res.code == '00000') {
					// let tree =  this.arrayToTree(res.data)	
					// console.log(res.data,'res.data');
					// console.log(tree,'tree');
					let data = res.data
					const map = new Map();
					const rootList = [];
					data.forEach(item => {
						item.children = item.level < 3 ? item.children || [] : null;
						item.text = item.categoryName;
						item.value = item.categoryId;
						map.set(item.categoryId, item);
					});
					data.forEach(item => {
						const parent = map.get(item.parentId);
						if (parent) {
							parent.children.push(item)
						} else {
							if (item.parentId === '0') {
								rootList.push(item)
							}
						}
					})
					that.treeData = rootList
					// console.log(rootList,'rootList');

				}
			},

			async getDictsList(dictType) {
				let res = await getDicts({
					dictType: dictType
				})
				if (res) {
					this.dictList[dictType] = res.data

				}
			},

			submit() {
				let that = this
				let params = {}
				// if (!this.imgIds) return this.$commonFn.msg('请上传解决方案')
				if (!this.result) return this.$commonFn.msg('请填写结果反馈')
				// params['problem_complete_file'] = this.imgIds.map(item => item.fileId).join(',')
				// params['bizType'] = 'problem_complete_file'
				params['result'] = this.result
				params['problemStatus'] = '4'
				params['problemId'] = this.problemId
				// params['currentTrackingCode'] = this.info.currentTrackingCode


				uni.showModal({
					title: '提示',
					content: '确认是否提交',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '数据提交中',
								mask: true
							});
							complete(params).then(ord => {
								that.$commonFn.msg('提交成功')
								uni.hideLoading();
								setTimeout(() => {
									that.$commonFn.Navback()
								}, 500);
							}).catch(err => {
								console.log(err, 'err')
								uni.hideLoading();
							})
						}
					}
				});
			},
			undataProgress() {
				let that = this
				if (!this.info.problemProgress) return this.$commonFn.msg('请填写进展进度')

				uni.showModal({
					title: '提示',
					content: '确认是否跟新进度',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '数据提交中',
								mask: true
							});
							progress({
								problemId: that.info.problemId,
								problemProgress: that.info.problemProgress,
							}).then(ord => {
								that.$commonFn.msg('更新成功')
								uni.hideLoading();
								that.getInfo()
								// setTimeout(() => {
								// 	that.$commonFn.Navback()
								// }, 500);
							}).catch(err => {
								console.log(err, 'err')
								uni.hideLoading();
							})
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabs_box {
		background-color: #fff;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		// box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); // 顶部栏阴影
		margin-bottom: 24rpx;
	}



	// .progress{
	// 	min-height: 150px;
	// }
	::v-deep .uni-textarea-textarea {
		text-align: right !important;
	}

	::v-deep .progress .uni-textarea-textarea {
		text-align: left !important;
	}

	::v-deep .uni-textarea-placeholder {
		text-align: right;
	}

	::v-deep .u-form-item__body__right__message {
		text-align: right !important;
	}

	::v-deep .u-textarea__field {
		text-align: right !important;
	}

	::v-deep .uni-date-editor--x__disabled {
		opacity: 1 !important;
	}

	::v-deep.uni-date__x-input {
		opacity: 1 !important;
		color: #000;
		text-align: right;
	}

	.tabs_box {
		background-color: #fff;
	}

	.info {
		background-color: #fff;
		// margin-top: 32rpx;
		// padding: 0 15px;
	}

	::v-deep .u-cell__body {
		justify-content: space-between;
		word-break: break-all !important;
	}

	::v-deep .u-cell__body__content {
		flex-shrink: 0;
		flex: none;
		padding-right: 10px;
	}

	::v-deep .uni-table {
		min-width: 750rpx !important;
		width: 750rpx !important;
		max-width: 750rpx !important;
	}

	.step_box_desc {
		&_item {
			padding-bottom: 12rpx;
		}
	}

	.material {
		padding-bottom: 100px;
		text-align: left;

		&_title {
			padding: 10px 15px;
			font-size: 15px;
			color: #303133;
		}
	}

	.timelistbox {
		background-color: #fff;
		padding: 24rpx;
	}

	.desc_card {
		padding: 10px;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
		margin: 8px 0;

		&_item {
			display: flex;
			font-size: 14px;
			font-weight: 400;
			line-height: 22px;
			color: #6a6a6a;
			margin-bottom: 4px;
			word-break: break-all;
			&_l{
				width: 120rpx;
				flex-shrink: 0;
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>